<template>
    <div class="kanban flex q-gutter-sm no-wrap q-py-sm" ref="kanbanRef" :class="{ 'clickdrag-active': isDragging }"
        @mousedown="onMouseDown" @mouseleave="onMouseLeave" @mouseup="onMouseUp" @mousemove="onMouseMove">
        <a看板列 v-for="item in 列组" :列="item" :卡组="卡组">
        </a看板列>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import Sortable from 'sortablejs';
import a看板列 from './a看板列.vue';

const 列组 = reactive([
    {
        状态: "选型中",
        颜色: "orange-1",
    },
    {
        状态: "投标中",
        颜色: "blue-1",
    },
    {
        状态: "已中标",
        颜色: "green-1",
    },
    {
        状态: "未中标",
        颜色: "grey-2",
    },
]);

const 卡组 = reactive([
    {
        状态: "选型中",
        项目名称: "项目1",
    },
    {
        状态: "选型中",
        项目名称: "项目1",
    },
    {
        状态: "选型中",
        项目名称: "项目1",
    },
    {
        状态: "选型中",
        项目名称: "项目1",
    },
    {
        状态: "选型中",
        项目名称: "项目1",
    },
    {
        状态: "选型中",
        项目名称: "项目1",
    },
    {
        状态: "选型中",
        项目名称: "项目18",
    },
    {
        状态: "投标中",
        项目名称: "项目2",
    },
    {
        状态: "已中标",
        项目名称: "项目3",
    },
    {
        状态: "已中标",
        项目名称: "项目88",
    },
    {
        状态: "未中标",
        项目名称: "项目4",
    },
]);

const kanbanRef = ref(null);
const isDragging = ref(false);
let startX;
let scrollLeft;

const ignoreEl = [
    ".kanban-column .kanban-column-header",
    ".kanban-column .add-card",
    ".kanban-column .kanban-card.new-card-area",
    ".card",
];

function setup_sortable() {
    new Sortable(kanbanRef.value, {
        group: "columns",
        animation: 150,
        dataIdAttr: "data-column-value",
        filter: ".add-new-column",
        handle: ".kanban-column-title",
        onEnd: function () {
            const order = this.toArray();
            console.log(`order 👉`, order);
            const slicedOrder = order.slice(1);
            console.log(`order 👉`, slicedOrder);
            // store.dispatch("update_column_order", slicedOrder);
        },
    });
}

function onMouseDown(e) {
    if (ignoreEl.some((el) => e.target.closest(el))) return;
    isDragging.value = true;
    startX = e.pageX - kanbanRef.value.offsetLeft;
    scrollLeft = kanbanRef.value.scrollLeft;
}

function onMouseLeave() {
    isDragging.value = false;
}

function onMouseUp() {
    isDragging.value = false;
}

function onMouseMove(e) {
    if (!isDragging.value) return;
    // e.preventDefault();
    const x = e.pageX - kanbanRef.value.offsetLeft;
    const walk = x - startX;
    kanbanRef.value.scrollLeft = scrollLeft - walk;
}
onMounted(() => {
    setup_sortable();
})
</script>

<style lang="scss" scoped>
.kanban {
    cursor: grab;
    user-select: none;
    overflow-y: hidden;
    -ms-overflow-style: none;
    // scrollbar-width: none;
}

.clickdrag-active {
    background-color: lightgray;
    cursor: grabbing;

}
</style>